<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="1200px" append-to-body :close-on-click-modal="false">
    <div class="fromWarp">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="企业名称" prop="menuName">
              <el-input v-model="form.menuName" placeholder="请输入企业名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="站点名称" prop="menuPath">
              <el-input v-model="form.menuPath" placeholder="请输入站点名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预警类型" prop="menuPath">
              <el-input v-model="form.menuPath" placeholder="请输入路由地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="预警时间" prop="menuPath">
              <el-date-picker
                v-model="timeData"
                :clearable="false"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预警持续时间" prop="menuPath">
              <el-input v-model="form.menuPath" placeholder="请输入路由地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预警处理时间" prop="menuPath">
              <el-input v-model="form.menuPath" placeholder="请输入路由地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="处理结果" prop="menuPath">
              <el-input v-model="form.menuPath" placeholder="请输入路由地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="情况说明" prop="menuPath">
              <el-input v-model="form.menuPath" placeholder="请输入路由地址"/>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="submit">
          <el-button type="primary">提交</el-button>
        </div>
      </el-form>
    </div>
    <div class="monitoringData">
      <monitoring-data/>
    </div>

  </el-dialog>
</template>

<script>
import MonitoringData from '@/views/earlyWarning/earlyWarningList/model/MonitoringData'

export default {
  name: 'EarlyWarningModel',
  components: {
    MonitoringData
  },
  data() {
    return {
      dialogVisible: false,
      title: '处理',
      form: {},
      rules: [],
      timeData: []
    }
  },
  watch: {
    timeData: {
      handler(val) {
        this.queryParams.startTime = val[0]
        this.queryParams.endTime = val[1]
      },
      deep: true
    }
  },
  created() {
    this.getCurrentHour()
  },
  methods: {
    showModel() {
      this.dialogVisible = true
    },
    getCurrentHour() {
      const startTime = this.$time.currentHour + ':00'
      const endTime = this.$time.currentHour + ':59'
      this.timeData = [startTime, endTime]
      this.queryParams.startTime = startTime
      this.queryParams.endTime = endTime
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(res => {
          done()
        })
        .catch(err => {
        })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  background: #CBDEFC;
  padding: 20px 10px;
}

.fromWarp {
  width: 100%;
  height: 346px;
  padding: 20px 10px;
  background: #FFFFFF;
  border-radius: 10px;
}

.submit {
  width: 100%;
  text-align: center;
}

.monitoringData {
  width: 100%;
}
</style>
